<template>
  <div>
    <h1>投诉详情</h1>
    <p>投诉标题：{{ complaint.title }}</p>
    <p>投诉信息：{{ complaint.info }}</p>
    <p>创建时间：{{ complaint.creationDate }}</p>
    <p>处理状态：{{ complaint.status }}</p>
    <p>处理结果：{{ complaint.result }}</p>
    <div v-if="complaint.attachment">
      <p>附件：<a :href="`/attachments/${complaint.attachment}`" download>{{ complaint.attachment }}</a></p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import Mock from 'mockjs';

export default {
  setup() {
    const route = useRoute();
    const complaint = ref({});

    onMounted(() => {
      const id = route.params.id;
      fetchComplaint(id);
    });

    const fetchComplaint = (id) => {
      const data = Mock.mock({
        'complaint': {
          'id|+1': id,
          title: '@title(5, 10)',
          info: '@cparagraph(3)',
          creationDate: '@date("yyyy-MM-dd")',
          status: '@pick(["正在处理中", "处理完成"])',
          result: '@cparagraph(1)',
          attachment: '@pick(["附件1.pdf", "附件2.docx", "附件3.xlsx"])'
        }
      });
      complaint.value = data.complaint;
    };

    return {
      complaint
    };
  }
};
</script>

<style scoped>
a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>